import { message, Progress, ProgressProps } from "antd"
import { useWindowFontSize } from "../../../../../assets/fun/Antd/configprovider";
import { useCallback, useEffect, useState } from "react";
import { getReportPlanData } from "../../api";


const FayunData = () => {
    const conicColors: ProgressProps['strokeColor'] = {
        '0%': '#015EEA',
        '100%': '#00C0FA',
      };
      //getReportPlanData
      const [countlist, setCountList] = useState<{ completingPlans: number, completingPlansPercent: number}>()
      const countFun = useCallback(async () => {
          const { code, msg, data } = await getReportPlanData() as {
              code: number, msg: string,
              data: { completingPlans: number, completingPlansPercent: number }
          };
          if (code === 20000) {
              setCountList(data)
          } else {
              message.error(msg);
          }
      }, [])

      useEffect(() => {
          countFun()
      }, [countFun])

    return (
        <div className="fayunplan">
            <div className="fayunplan-title">
                发运计划数据
            </div>
            <div className="fayun-item">
                <div className="item-main">
                    <div className="fayun-item-title">正在执行计划数</div>
                    <div className="fayun-item-value">
                        {countlist?.completingPlans}
                        <span>条</span>
                    </div>
                </div>
                <div className="item-jpg">
                    <Progress 
                        size={useWindowFontSize(90)} 
                        type="circle" 
                        percent={countlist?.completingPlansPercent} 
                        strokeWidth={10}  // 增加进度条的宽度
                        strokeColor={conicColors}
                        format={(percent) => (
                            <span style={{ fontSize: '1.6rem', color:'#999' }}>
                              {percent}%
                            </span>
                          )}
                        />
                </div>
            </div>
        </div>
    )
}

export default FayunData